<template>
	<div class="page pageFixed">
		<custom-box customback title="我的记录" @back="back">
			<div class="record flex">
				<div class="slider flex col">
					<div class="item flex col a-center j-center" :class="{'on':active==0}" @click="tab(0)">
						<div class="icon i1"></div>
						<div class="text">领取记录</div>
					</div>
					<div class="item flex col a-center j-center" :class="{'on':active==1}" @click="tab(1)">
						<div class="icon i2"></div>
						<div class="text">商城记录</div>
					</div>
					<div class="item flex col a-center j-center" :class="{'on':active==2}" @click="tab(2)">
						<div class="icon i3"></div>
						<div class="text">宝箱记录</div>
					</div>
				</div>
				<div class="record_container">
					<claim-record @claimRecord="claim" v-if="active==0"></claim-record>
					<ishop-record v-else-if="active==1"></ishop-record>
					<box-record @boxprize="boxprize" @boxdetail="boxdetail" v-else></box-record>
				</div>
			</div>
		</custom-box>
	</div>
</template>

<script>
	/*
		@back 返回到个人中心
		@claimRecord 点击领取记录中的领取按钮
		@boxprize 点击宝箱记录-待领取-领取按钮
		@boxdetail 点击宝箱记录-未领取-领取按钮
	*/
	import claimRecord from './claimRecord.vue'//领取记录
	import ishopRecord from './ishopRecord.vue'//领取记录
	import boxRecord from './boxRecord.vue'//领取记录
	export default {
		components:{claimRecord,ishopRecord,boxRecord},
		data() {
			return {
				active:0
			}
		},
		methods:{
			tab(i){
				this.active = i
			},
			back(){
				this.$emit('back')
			},
			claim(v){				
				this.$emit('claimRecord',v)
			},
			boxprize(v){
				this.$emit('boxprize',v)
			},
			boxdetail(v){
				this.$emit('boxdetail',v)
			}
		}
	}
</script>

<style scoped lang="scss">
	
	.record {
		width: 100%;
		height: 100%;
		overflow: hidden;
		padding: .3rem;
	}

	.slider {
		width: 1.82rem;
		padding: 0px .2rem;
		height: 4.76rem;
		background: #FFFFFF;
		box-shadow: 0px 2px 28px 1px rgba(202, 202, 202, 0.5), inset 0px 1px 3px 0px #F7F7F7;
		.item{width: 100%; flex:1; border-bottom: 1px solid #E5EBF1;}
		.item:last-child{border: 0;}
		.text{font-size: .24rem; color:#313131; text-align: center; margin-top: .15rem;}
		.icon{
			width: .6rem; height: .6rem;
			&.i1{background: url('../../assets/img/slider01.png') no-repeat; background-size: 100% 100%;}
			&.i2{background: url('../../assets/img/slider02.png') no-repeat; background-size: 100% 100%;}
			&.i3{background: url('../../assets/img/slider03.png') no-repeat; background-size: 100% 100%;}
		}
		.item.on .text{
			background: linear-gradient(90deg, #FFC500 0%, #FF5F01 100%);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
		}
	}
	.record_container{flex:1; padding-left: .3rem;}	
</style>